<!--
 * @Author: your name
 * @Date: 2020-08-31 11:41:18
 * @LastEditTime: 2020-09-08 15:27:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-list.vue
-->
<template>
  <div class="main-wrap">
    <toolbarTop :left="left" @refresh="refresh" @clear="clear" />
    <a-form class="cache-form" layout="vertical">
      <a-form-item :label="item.name" v-for="item in data.data" :key="item.key">
        <a-checkbox-group v-if="item.child" v-model:value="item.checkList">
          <a-row>
            <a-col :span="8" v-for="item in item.child" :key="item.value">
              <a-checkbox :value="item.value">
                {{ item.name }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
        <a-checkbox-group v-else v-model:value="item.checkList">
          <a-checkbox :value="item.value">
            {{ item.name }}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getCurrentInstance, reactive } from 'vue';
import toolbarTop from '../../components/toolbar/toolbar-top.vue';
export default {
  name: 'CacheList',
  components: {
    toolbarTop
  },
  setup() {
    let { ctx } = getCurrentInstance();

    let left = [
      {
        text: '刷新',
        handleName: 'refresh'
      },
      {
        text: '清除',
        handleName: 'clear'
      }
    ];

    function refresh() {
      getCacheList();
    }

    async function clear() {
      let params = {};
      data.data.forEach((d) => {
        params[d.key] = d.checkList;
      });
      let res = await ctx.$fetch.post('/setting.Cache/clear', {checkList:params});
      ctx.$message.success(res.msg);
      refresh();
    }

    let data = reactive({
      data: []
    });

    async function getCacheList() {
      let List = await ctx.$fetch.post('/setting.Cache/list');
      data.data = List.data.map((d) => {
        return {
          ...d,
          checkList: []
        };
      });
    }
    getCacheList();

    return {
      getCacheList,
      data,
      left,
      refresh,
      clear
    };
  }
};
</script>

<style lang="scss" scoped>
.cache-form {
  padding: 20px;
}
</style>
